import {HomeAPI} from 'api';
import {BGScroll} from 'components/View/BackGround';
import React, {Fragment, useEffect} from 'react';
import {Image, StyleSheet, View} from 'react-native';
import {useFetch} from 'utils/hooks';
import {STYLE_COLOR} from 'variables';
import InfoActivityView from './components/InfoActivityView';

import ProgressGoalView from './components/ProgressGoalView';

const HomePage: React.ComponentType<any> = () => {
  const [progressInfo, loadProgressInfo, progressLoading] = useFetch(
    HomeAPI.getProgressMessage,
  );
  const [infoActivity, loadInfoActivity] = useFetch(HomeAPI.fetchHotActivity, {
    title: '',
    functions: [],
  });
  const [banner, loadBanner] = useFetch(HomeAPI.fetchSwiper, []);

  // console.log(infoActivity, 'info');
  useEffect(() => {
    loadProgressInfo();
    loadInfoActivity('info');
    loadBanner();
  }, []);
  return (
    <Fragment>
      <BGScroll
        white={true}
        showsVerticalScrollIndicator={false}
        contentInsetAdjustmentBehavior="never"
        refreshing={progressLoading}
        onRefresh={loadProgressInfo}
        // onScrollBeginDrag={onScrollBeginDrag}
        // onScroll={onScroll}
        // onScrollEndDrag={onScrollEndDrag}
      >
        {progressInfo && <ProgressGoalView {...progressInfo} />}
        <View
          style={[
            styles.mainContainer,
            {
              marginTop: -62,
              padding: 16,
            },
          ]}>
          {!!banner.length && (
            <Image
              style={{width: 330, height: 110, borderRadius: 8}}
              source={{uri: banner[0].pic_url}}
            />
          )}
        </View>
        <View style={styles.divider} />
        <InfoActivityView infoActivity={infoActivity} />
      </BGScroll>
    </Fragment>
  );
};
const styles = StyleSheet.create({
  mainContainer: {
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    backgroundColor: STYLE_COLOR.CONTENT_BACKGROUND,
  },
  divider: {
    backgroundColor: STYLE_COLOR.CONTAINER_BACKGROUND,
    height: 8,
  },
});

export default HomePage;
